<template>
  <div class="content-section settings-section">
    <div class="section-header">
      <div class="section-title-container">
        <h2 class="section-title">
          <span class="title-icon">⚙️</span>
          账号设置
        </h2>
        <p class="section-subtitle">管理您的账户安全和隐私设置</p>
      </div>
      <div class="profile-actions">
        <!--        <button class="btn-form btn-secondary" @click="resetPasswordForm">重置</button>-->
        <button class="btn-style" @click="changePassword" :disabled="!canChangePassword">
          保存修改
        </button>
      </div>
    </div>

    <div class="settings-tabs">
      <div class="settings-tab active">密码安全</div>
      <!--      <div class="settings-tab">隐私设置</div>-->
      <!--      <div class="settings-tab">通知设置</div>-->
    </div>

    <n-form ref="formRef" :model="passwordForm" :rules="rules">
      <n-form-item
        path="avatar"
        label="修改密码"
        label-style="color: #374151;
      fontSize: 15px;fontWeight: 600;"
      >
        <div class="password-strength-indicator">
          <div class="strength-bar">
            <div class="strength-fill" :class="passwordStrengthClass"></div>
          </div>
          <span class="strength-text">{{ passwordStrengthText }}</span>
        </div>
      </n-form-item>
      <n-form-item
        path="oldPassword"
        label="旧密码"
        label-style="color: #374151;
      fontSize: 15px;fontWeight: 600;"
      >
        <input
          v-model="passwordForm.oldPassword"
          :type="showCurrentPassword ? 'text' : 'password'"
          class="form-input"
          placeholder="请输入当前密码"
        />
        <button class="input-toggle" @click="togglePasswordVisibility('oldPassword')">
          {{ showCurrentPassword ? '🔓' : '🔒' }}
        </button>
      </n-form-item>
      <n-form-item
        path="phone"
        label="新密码"
        label-style="color: #374151;
      fontSize: 15px;fontWeight: 600;"
      >
        <input
          v-model="passwordForm.newPassword"
          :type="showNewPassword ? 'text' : 'password'"
          class="form-input"
          placeholder="请输入新密码"
        />
        <button class="input-toggle" @click="togglePasswordVisibility('newPassword')">
          {{ showNewPassword ? '🔓' : '🔒' }}
        </button>
      </n-form-item>
      <n-form-item
        path="email"
        label="确认新密码"
        label-style="color: #374151;
      fontSize: 15px;fontWeight: 600;"
      >
        <input
          v-model="passwordForm.confirm"
          :type="showConfirmPassword ? 'text' : 'password'"
          class="form-input"
          placeholder="请再次输入新密码"
        />
        <button class="input-toggle" @click="togglePasswordVisibility('confirm')">
          {{ showConfirmPassword ? '🔓' : '🔒' }}
        </button>
      </n-form-item>
    </n-form>
  </div>
</template>

<script setup>
  import { ref, computed, onMounted } from 'vue';
  import { updatePasswordApi } from '@/api/system/user';
  import { useMessage } from 'naive-ui';

  const message = useMessage();

  // 密码可见性控制
  const showCurrentPassword = ref(false);
  const showNewPassword = ref(false);
  const showConfirmPassword = ref(false);

  // 密码表单
  const passwordForm = ref({
    oldPassword: '',
    newPassword: '',
    confirm: '',
  });

  const rules = {
    username: {
      required: true,
      message: '请输入昵称',
      trigger: 'blur',
    },
    avatar: {
      required: true,
      message: '请输入昵称',
      trigger: 'blur',
    },
    phone: [
      {
        required: true,
        validator(rule, value) {
          if (!/^1[3456789]\d{9}$/.test(value)) {
            return new Error('请输入正确的手机号码');
          } else {
            return true;
          }
        },
        trigger: ['input', 'blur'],
      },
    ],
  };

  // 密码强度计算
  const passwordStrengthClass = computed(() => {
    const password = passwordForm.value.newPassword;
    if (!password) return '';
    if (password.length < 6) return 'weak';
    if (password.length < 8) return 'medium';
    if (password.length >= 8 && /[A-Z]/.test(password) && /[0-9]/.test(password)) return 'strong';
    return 'medium';
  });

  const passwordStrengthText = computed(() => {
    const strength = passwordStrengthClass.value;
    switch (strength) {
      case 'weak':
        return '密码强度：弱';
      case 'medium':
        return '密码强度：中等';
      case 'strong':
        return '密码强度：强';
      default:
        return '请输入密码';
    }
  });

  const canChangePassword = computed(() => {
    return (
      passwordForm.value.oldPassword && passwordForm.value.newPassword && passwordForm.value.confirm
    );
  });

  const changePassword = async () => {
    console.log('修改密码');
    if (passwordForm.value.newPassword.length < 6) {
      message.error('密码长度不得低于6位！');
      return;
    }
    if (passwordForm.value.newPassword !== passwordForm.value.confirm) {
      message.error('两次新密码输入不一致！');
      return;
    }
    try {
      const params = {
        oldPassword: passwordForm.value.oldPassword,
        newPassword: passwordForm.value.newPassword,
      };

      await updatePasswordApi(params);
      message.success('修改密码');
      resetPasswordForm();
    } catch (error) {
      console.error('error:', error);
    }
  };

  const resetPasswordForm = () => {
    passwordForm.value = {
      oldPassword: '',
      newPassword: '',
      confirm: '',
    };
  };

  const togglePasswordVisibility = (type) => {
    switch (type) {
      case 'oldPassword':
        showCurrentPassword.value = !showCurrentPassword.value;
        break;
      case 'newPassword':
        showNewPassword.value = !showNewPassword.value;
        break;
      case 'confirm':
        showConfirmPassword.value = !showConfirmPassword.value;
        break;
    }
  };
</script>

<style lang="less" scoped>
  // ==================== 账号设置模块样式 ====================
  .settings-section {
    .settings-tabs {
      display: flex;
      margin-bottom: 32px;
      border-bottom: 2px solid #f1f5f9;

      .settings-tab {
        padding: 16px 24px;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        transition: all 0.3s ease;
        color: #64748b;
        font-weight: 600;
        position: relative;

        &:hover {
          color: #d174df;
          background: rgba(209, 116, 223, 0.05);
        }

        &.active {
          color: #d174df;
          border-bottom-color: #d174df;
          background: rgba(209, 116, 223, 0.1);
        }
      }
    }

    .password-strength-indicator {
      padding: 16px;
      background: rgba(248, 250, 252, 0.8);
      border-radius: 12px;
      border: 2px solid #f1f5f9;
      width: 100%;

      .strength-bar {
        width: 100%;
        height: 8px;
        background: #e2e8f0;
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 8px;

        .strength-fill {
          height: 100%;
          transition: all 0.3s ease;
          border-radius: 4px;

          &.weak {
            width: 33%;
            background: linear-gradient(90deg, #ef4444, #dc2626);
          }

          &.medium {
            width: 66%;
            background: linear-gradient(90deg, #f59e0b, #d97706);
          }

          &.strong {
            width: 100%;
            background: linear-gradient(90deg, #4a90e2, #50c878);
          }
        }
      }

      .strength-text {
        font-size: 14px;
        font-weight: 600;
        color: #374151;
      }
    }
  }

  // ==================== 表单样式 ====================
  .form-input,
  .form-textarea {
    width: 100%;
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 15px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);

    &:focus {
      outline: none;
      border-color: #d174df;
      box-shadow: 0 0 0 4px rgba(209, 116, 223, 0.1);
      background: white;
    }

    &::placeholder {
      color: #9ca3af;
    }
  }

  .input-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.3s ease;

    &:hover {
      background: #f1f5f9;
    }
  }

  // ==================== 按钮样式 ====================
  .profile-actions {
    .btn-secondary {
      background: rgba(248, 250, 252, 0.8);
      color: #64748b;
      border: 2px solid #e2e8f0;
      margin-right: 10px;

      &:hover {
        background: rgba(241, 245, 249, 0.9);
        border-color: #cbd5e1;
      }
    }
  }
</style>
